<template>
  <div class="person">
    <h2>
      姓: <input type="text" v-model="firstName">  <br>

      名:  <input type="text" v-model="lastName"> <br>

      全民: {{fullName }} <br>
    </h2>
    <button @click="changeName">修改名字</button>
  </div>
</template>

<script lang="ts" setup name="Person">
import {ref, reactive, computed, toValue} from 'vue'
let firstName = ref('张')
let lastName = ref('四')
let fullName = computed({
    get() {
    return firstName.value + '--' + lastName.value
   },
   set(val) {
    console.log(val);
    firstName.value = val.split('-')[0];
    lastName.value = val.split('-')[1]
   }
   
})

function changeName() {
  fullName.value ='77777-99999'
}

</script>